<template>
	<view class="big-box">
		<em-top :titleIfLeft="true" title="个人中心"></em-top>
		<view class="box-con">
			<view class="my-info-default" v-if="Object.keys(userInfos).length == 0">
				<image src="../../static/my/default-avt.png" mode="widthFix"></image>
				<view class="info-def-r" @click="gotoPage('/pages/login/login')">
					<view>点击注册/登录</view>
					<view>开启体验之旅</view>
				</view>
			</view>
            
			<view class="set">
				<view class="set-tit">设置</view>
				<view class="set-lis" @click="gotoPage('/personalCenter/personChild/mine')">
					<image src="../../static/my/safe.png" mode="widthFix"></image>
					<text>账号安全</text>
					<view>查看</view>
				</view>
			</view>
			<view class="" style="height: 200rpx;"></view>
		</view>
		<tabBar :address="2"></tabBar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfos: {},
                detail: {}
			}
		},
		onShow() {
			this.userInfos = uni.getStorageSync('userInfos') || {}
			if (uni.getStorageSync('userInfos')) {
				this.getPersonalDetail()
			}
		},
		methods: {
			returnMsg(title) {
				uni.showToast({
					title: title,
					icon: 'none',
				})
			},
			getPersonalDetail() {
				this.$asynApi.getPersonalHome().then((res) => {
					if (res.code == 200) {
						this.detail = res.data
                        uni.setStorageSync('mobile', res.data.mobile)
					}
				})
			},
			gotoPage(url) {
				if (url) {
					uni.navigateTo({
						url: url,
					})
				} else {
					uni.showToast({
						title: '您所点击的内容正在建设中,请后续关注!',
						icon: 'none',
					})
				}
			},
		},
	}
</script>

<style scoped lang="less">
	.big-box {
		position: relative;
		// background: url(/static/login/bg.jpg) no-repeat center;
		background-size: 100% 100%;
		height: auto;
		min-height: 100vh;

		.box-con {
			padding: 20rpx 30rpx 0;

			.my-info-default {
				display: flex;
				align-items: center;

				image {
					width: 128rpx;
					margin-right: 25rpx;
				}

				.info-def-r {
					font-size: 42rpx;
					color: #121836;

					view {
						&:last-child {
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #aab0ba;
						}
					}
				}
			}

			.my-info {
				display: flex;
				align-items: center;

				.info-l {
					width: 128rpx;
					height: 128rpx;
					border-radius: 50%;
					background: #1477ff;
					font-size: 44rpx;
					color: #ffffff;
					text-align: center;
					line-height: 128rpx;
					margin-right: 25rpx;
				}

				.info-r-t {
					display: flex;
					align-items: left;
					flex-direction: column;
					font-size: 42rpx;
					color: #121836;

					.info-auth {
						font-size: 26rpx;
						color: #ffffff;
						padding: 13rpx 27rpx;
						border-radius: 5rpx;
						background: #12b4ff;
						margin-left: 20rpx;
					}

					.authSuc {
						background: #24bc78;
					}

					.authErr {
						background: #979797;
					}

					.authPed {
						background: #fecdb4;
					}
				}

				.info-r-b {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #797c83;
					display: flex;
					align-items: center;

					// view {
					// 	margin-right: 2rpx;
					// }
				}
			}

			.member-card-box {
				width: 100%;
				height: 140rpx;
				margin: 50rpx auto;
				border-radius: 16rpx;
				overflow: hidden;
				position: relative;

				.card-con {
					position: absolute;
					left: 20rpx;
					bottom: 15rpx;
					z-index: 1;
					color: #E3C377;
					font-size: 32rpx;

					text {
						margin-right: 20rpx;
					}
				}
			}

			.diamond {
				border-radius: 22rpx;
				background: #ffffff;
				padding: 30rpx 20rpx;
				margin: 50rpx auto 0;

				.dia-tit {
					font-size: 32rpx;
					color: #121836;
				}

				.dia-uls {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-top: 30rpx;

					.dia-lis {
						font-size: 28rpx;
						color: #6d7e9c;
						text-align: center;
                        margin-right: 30rpx;

						image {
							width: 90rpx;
						}

						view {
							margin-top: 20rpx;
						}

						.dia-num {
							font-size: 36rpx;
							color: #979797;
						}

						.dia-num-log {
							color: #000000;
						}
					}
				}
			}

			.serve-img {
				border-radius: 25rpx;
				border-bottom-left-radius: 40rpx;
				border-bottom-right-radius: 40rpx;
				overflow: hidden;

				image {
					width: 100%;
				}
			}

			.set {
				background: #ffffff;
				border-radius: 22rpx;
				margin-top: 50rpx;
				padding: 30rpx 20rpx;

				.set-tit {
					font-size: 32rpx;
					color: #121836;
				}

				.set-lis {
					display: flex;
					align-items: center;
					margin: 30rpx auto;

					image {
						width: 44rpx;
					}

					text {
						font-size: 26rpx;
						color: #121836;
						margin-left: 15rpx;
					}

					view {
						font-size: 26rpx;
						color: #1477ff;
						flex: 1;
						text-align: right;
					}
				}
			}
		}
	}
</style>